<template>
	<view class="ucenter-page">
		<u-navbar title-size="0" height="42" title="" :border-bottom="false" back-icon-color="#383842" back-text="返回首页"
			title=""></u-navbar>
		<view class="user-box">
			<image src="../static/images/logo.png" mode="" class="logo"></image>
			<button type="default" class="btn wx-btn" @click="show = true">
				<image src="../static/images/weixin.png" mode="" class="icon"></image>
				<text>微信一键登录</text>
			</button>
			<view class="agree flex-center">
				<u-checkbox-group width="50rpx">
					<u-checkbox v-model="checked" shape="circle" size="32" active-color="#303337"></u-checkbox>
				</u-checkbox-group>
				<text class="read">已阅读《推荐人协议》《自由职业者用户协议》</text>
			</view>
		</view>
		<u-popup v-model="show"  mode="bottom" border-radius="14">
			<view class="popup-content">
				<view class="popup-top flex-center">
					<image src="../static/images/logoxs.png" class="logo" mode=""></image>
					<view class="popup-app flex_bd flex-center">
						<view class="name">
							中联云帮帮
						</view>
						<view class="apply">
							申请
						</view>
					</view>
					<view class="notice">
						<u-icon name="info-circle" size="32" color="#ADADAD"></u-icon>
					</view>
				</view>
			    <view class="popup-middle">
			    	<view class="title">
			    		获取你的昵称、头像
			    	</view>
					<view class="popup-cells">
						<view class="popup-cell flex-center">
							<image src="../static/images/uatr.png" mode="" class="avatar"></image>
							<view class="popup-cell__bd flex_bd">
								<view class="nickname flex-center">
									<image src="../static/images/word.png" mode="" class="word"></image>田小熊
								</view>
								<view class="desc">
									微信昵称头像
								</view>
							</view>
							<u-icon name="checkbox-mark" size="40" color="#07c062"></u-icon>
						</view>
					</view>
			        <view class="change-account">
			        	使用其他头像和昵称
			        </view>
				</view>
			    <view class="popup-foot flex-center">
			    	<button type="default" class="btn" @click="show = false">拒绝</button>
					<button type="default" class="btn btn-allow">允许</button>
			    </view>
			</view>
		</u-popup>
		
		<u-popup v-model="show1"  mode="bottom" border-radius="14">
			<view class="popup-content">
				<view class="popup-desc">
					为了让您能及时接收云帮帮的产品服务信息，请您点击下方按钮，通过手机号进行登陆。
				</view>
				<view class="bindtel">
					<button type="default" class="btn">绑定手机号</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				checked: false,
				show: false,
				show1: true
			}
		},
		onLoad() {

		},
		methods: {
			openUrl(e) {
				console.log(e)
				uni.navigateTo({
					url: e
				});
			},
		}
	}
</script>

<style lang="scss">
	.user-box {
		text-align: center;
		padding: 152rpx 32rpx 0;

		.logo {
			width: 200rpx;
			height: 200rpx;
			border-radius: 100%;
			display: block;
			margin: 0 auto;
			margin-bottom: 100rpx;
		}

		.wx-btn {
			background-color: #05C160;
			border-radius: 50rpx;
			font-size: 36rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 4rpx;

			.icon {
				height: 56rpx;
				width: 56rpx;
				margin-right: 24rpx;
			}
		}

		.agree {
			margin-top: 24rpx;
			justify-content: center;

			.read {
				font-size: 24rpx;
				color: #9C9C9C;
			}
		}
	}
	
	.popup-content{
		padding: 48rpx;
		
		.popup-desc{
			font-size: 32rpx;
			color: #606366;
			line-height: 56rpx;
		}
		
		.bindtel{
			margin-top: 32rpx;
			padding: 16rpx 0;
			
			.btn{
				font-size: 36rpx;
				color: #fff;
				line-height: 96rpx;
				border-radius: 48rpx;
				background-color: #05C160;
			}
		}
		
		.popup-top{
			.logo{
				width: 48rpx;
				height: 48rpx;
				border-radius: 100%;
				display: block;
				margin-right: 18rpx;
			}
			
			.popup-app{
				font-size: 28rpx;
				color: #191919;
				.name{
					font-weight: 600;
					margin-right: 24rpx;
				}
			}
		}
		
		.popup-middle{
			padding: 44rpx 0;
			.title{
				font-size: 34rpx;
				color: #191919;
				font-weight: bold;
				margin-bottom: 30rpx;
			}
			
			.change-account{
				font-size: 28rpx;
				color: #5d637e;
				margin-top: 32rpx;
			}
			.popup-cells{
				border-top: 2rpx solid #e3e3e3;
				
				.popup-cell{
					padding: 20rpx 32rpx;
					border-bottom: 2rpx solid #e3e3e3;
					
					.avatar{
						width: 88rpx;
						height: 88rpx;
						display: block;
						margin-right: 24rpx;
						border-radius: 8rpx;
					}
					
					.popup-cell__bd{
						.nickname{
							font-size: 32rpx;
							color: #191919;
							font-weight: 600;
							margin-bottom: 8rpx;
							
							.word{
								width: 36rpx;
								height: 36rpx;
								display: block;
								margin-right: 14rpx;
							}
						}
						
						.desc{
							font-size: 28rpx;
							color: #b8b8b8;
						}
					}
				}
			}
		}
		
		.popup-foot{
			padding: 40rpx 0;
			justify-content: center;
			
			.btn{
				background-color: #f2f2f2;
				font-size: 34rpx;
				color: #12c165;
				margin: 0 18rpx;
				line-height: 80rpx;
				border-radius: 16rpx;
				width: 240rpx;
			}
			
			.btn-allow{
				background-color: #07c062;
				color: #fff;
			}
		}
	}
</style>
